<template>
  <div>
    <el-dialog
      custom-class="google-customer-info-dialog"
      :width="tableWidth"
      :title="$t('客户信息')"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-form @submit.native.prevent ref="formRef" :model="formData" size="mini" label-width="80px">
        <el-form-item label="客人:" prop=""> {{ formData.receiveName }} </el-form-item>
        <el-form-item label="邮编:" prop=""> {{ formData.receivePostcode }} </el-form-item>
        <el-form-item label="地址:" prop=""> {{ formData.address }} </el-form-item>
        <el-form-item label="包裹号:" prop=""> {{ formData.packageNo }} </el-form-item>
        <el-form-item label="状态:" prop="">
          <!-- 1 待配送 2 配送中 3 已完成 (状态2 无用) -->
          <div v-if="formData.status == 1" :style="{ color: $randomColor(formData.status) }">{{ $t('待配送') }}</div>
          <div v-if="formData.status == 2" :style="{ color: $randomColor(formData.status) }">{{ $t('配送中') }}</div>
          <div v-if="formData.status == 3" :style="{ color: $randomColor(formData.status) }">{{ $t('已完成') }}</div>
        </el-form-item>
        <el-form-item label="拍照确认:">
          <div class="camera-upload" ref="cameraUploadRef">
            <el-upload
              disabled
              action=""
              :file-list="fileList"
              ref="uploadRef"
              list-type="picture-card"
              capture="camera"
              accept="image/*"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="$viewImage(file.url)">
                    <i class="el-icon-view"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="负责人:" prop="">
          {{ formData.nickNames }}
        </el-form-item>
      </el-form>
      <div slot="footer">
        <div>
          <el-button @click="cancel">
            {{ $t('关闭') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        key1: [{ required: true, message: this.$t('请输入'), trigger: 'blur' }],
      },
      fileList: [],
      /**是否正在上传 */
      uploadFlag: false,
      /**待上传列表 */
      waitUploadList: [],
      uploadLoading: false,
    }
  },
  computed: {
    /**@returns {any} */
    tableWidth() {
      return this.isMobile() ? '350px' : '600px'
    },
  },
  mounted() {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        if (this.formData.sendConfirmImages) {
          this.fileList = this.formData.sendConfirmImages?.split(',').map((i) => {
            return {
              url: i,
            }
          })
        } else {
          this.fileList = []
        }
        // this.$nextTick(() => {
        //   this.$refs['cameraUploadRef'].children[0].children[1].children[1].setAttribute('capture', 'camera')
        // })
      }
    },
  },
  methods: {
    getList() {},

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.camera-upload {
  width: 100%;
  max-height: 300px;
  overflow: auto;
  $itemWidth: 110px;
  ::v-deep .el-upload-list__item {
    width: $itemWidth;
    height: $itemWidth;
  }
  ::v-deep .el-upload--picture-card {
    width: $itemWidth;
    height: $itemWidth;
    position: relative;
    .el-icon-plus {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
